React Suspense: Põhjalik juhend andmete hankimiseks ja koodi tükeldamiseks

React Suspense on React 16.6-s tutvustatud võimas funktsioon, mis võimaldab "peatada" komponendi renderdamise millegi ootel, näiteks andmete laadimise või koodi allalaadimise ajal. See pakub deklaratiivset viisi laadimisseisundite haldamiseks ja kasutajakogemuse parandamiseks, käsitledes asünkroonseid toiminguid sujuvalt. See juhend viib teid läbi Suspense'i kontseptsioonide, selle kasutusjuhtude ja praktiliste näidetega, kuidas seda oma Reacti rakendustes rakendada.

Mis on React Suspense?

Suspense on Reacti komponent, mis ümbritseb teisi komponente ja võimaldab kuvada varuliidese (nt laadimise pöörlev indikaator) ajal, mil need komponendid ootavad lubaduse täitmist. See lubadus võib olla seotud:

• Andmete hankimine: Andmete ootamine API-st.
• Koodi tükeldamine: JavaScripti moodulite allalaadimise ja parsitud saamise ootamine.

Enne Suspense'i hõlmas laadimisseisundite haldamine sageli keerulist tingimuslikku renderdamist ja asünkroonsete toimingute käsitsi haldamist. Suspense lihtsustab seda, pakkudes deklaratiivset lähenemist, muutes teie koodi puhtamaks ja hooldatavamaks.

Põhimõisted

• Suspense komponent: Komponent <Suspense> ise. See aktsepteerib fallback proppi, mis määrab kasutajaliidese, mida kuvatakse ümbritsetud komponentide ootamise ajal.
• React.lazy(): Funktsioon, mis võimaldab koodi tükeldamist komponentide dünaamilise importimise teel. See tagastab Promise'i, mis laheneb, kui komponent on laetud.
• Promise'i integreerimine: Suspense integreerub sujuvalt Promise'idega. Kui komponent proovib renderdada andmeid Promise'ist, mis pole veel täidetud, siis see "peatub" ja kuvab varuliidese.

Kasutusjuhud

1. Andmete hankimine Suspense'iga

Üks peamisi Suspense'i kasutusjuhte on andmete hankimise haldamine. Selle asemel, et käsitsi hallata laadimisseisundeid tingimusliku renderdamisega, saate kasutada Suspense'i laadimise indikaatori deklaratiivseks kuvamiseks, oodates andmete saabumist.

Näide: Kasutajaandmete hankimine API-st

Oletame, et teil on komponent, mis kuvab API-st hangitud kasutajaandmeid. Ilma Suspense'ita võiks teie kood välja näha selline:

import React, { useState, useEffect } from 'react';

function UserProfile() {
  const [user, setUser] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await fetch('https://api.example.com/users/123');
        const data = await response.json();
        setUser(data);
      } catch (err) {
        setError(err);
      } finally {
        setIsLoading(false);
      }
    }

    fetchData();
  }, []);

  if (isLoading) {
    return <p>Kasutajaandmete laadimine...</p>;
  }

  if (error) {
    return <p>Viga: {error.message}</p>;
  }

  if (!user) {
    return <p>Kasutajaandmed pole saadaval.</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>E-post: {user.email}</p>
    </div>
  );
}

export default UserProfile;

See kood töötab, kuid see hõlmab mitme olekumuutuja (isLoading, error, user) haldamist ja tingimuslikku renderdamisloogikat. Suspense'iga saate seda lihtsustada, kasutades andmete hankimise teeki nagu SWR või TanStack Query (endine React Query), mis on loodud sujuvalt Suspense'iga töötama.

Siin on, kuidas SWR-i Suspense'iga kasutada:

import React from 'react';
import useSWR from 'swr';

// Lihtne hankija funktsioon
const fetcher = (...args) => fetch(...args).then(res => res.json());

function UserProfile() {
  const { data: user, error } = useSWR('/api/users/123', fetcher, { suspense: true });

  if (error) {
    return <p>Viga: {error.message}</p>;
  }

  return (
    <div>
      <h2>{user.name}</h2>
      <p>E-post: {user.email}</p>
    </div>
  );
}

function App() {
  return (
    <Suspense fallback={<p>Kasutajaandmete laadimine...</p>}>
      <UserProfile />
    </Suspense>
  );
}

export default App;

Selles näites:

• Kasutame useSWR kasutajaandmete hankimiseks. Valik suspense: true annab SWR-ile teada, et visata Promise, kui andmed pole veel saadaval.
• Komponent UserProfile ei pea laadimise ega veaseisundeid selgesõnaliselt haldama. See lihtsalt renderdab kasutajaandmed, kui need on saadaval.
• Komponent <Suspense> püüab SWR-i visatud Promise'i kinni ja kuvab varuliidese (<p>Kasutajaandmete laadimine...</p>) andmete hankimise ajal.

See lähenemine lihtsustab teie komponendi loogikat ja muudab andmete hankimise kohta arutlemise lihtsamaks.

Globaalsed kaalutlused andmete hankimisel:

Rakenduste loomisel globaalsele auditooriumile arvestage järgmiste teguritega:

• Võrgu latentsus: Kasutajad erinevates geograafilistes asukohtades võivad kogeda erinevat võrgu latentsust. Suspense aitab pakkuda paremat kasutajakogemust, kuvades laadimise indikaatoreid andmete kaugetest serveritest hankimise ajal. Kaaluge sisu edastusvõrgu (CDN) kasutamist oma andmete kasutajatele lähemale vahemällu salvestamiseks.
• Andmete lokaliseerimine: Veenduge, et teie API toetab andmete lokaliseerimist, võimaldades teil pakkuda andmeid kasutaja eelistatud keeles ja vormingus.
• API kättesaadavus: Jälgige oma API-de kättesaadavust ja jõudlust erinevatest piirkondadest, et tagada ühtlane kasutajakogemus.

2. Koodi tükeldamine React.lazy() ja Suspense'iga

Koodi tükeldamine on tehnika rakenduse jaotamiseks väiksemateks osadeks, mida saab laadida nõudmisel. See võib oluliselt parandada rakenduse esialgset laadimisaega, eriti suurte ja keeruliste projektide puhul.

React pakub komponentide koodi tükeldamiseks funktsiooni React.lazy(). Koos Suspense'iga kasutamisel võimaldab see kuvada varuliidese, oodates komponendi allalaadimist ja parsitud saamist.

Näide: Komponendi laisklaadimine

import React, { Suspense, lazy } from 'react';

const OtherComponent = lazy(() => import('./OtherComponent'));

function MyComponent() {
  return (
    <div>
      <Suspense fallback={<p>Laadimine...</p>}>
        <OtherComponent />
      </Suspense>
    </div>
  );
}

export default MyComponent;

Selles näites:

• Kasutame React.lazy(), et dünaamiliselt importida OtherComponent. See tagastab Promise'i, mis laheneb, kui komponent on laetud.
• Ümbritseme <OtherComponent /> <Suspense> komponendiga ja pakume fallback proppi.
• Ajal, mil OtherComponent laaditakse, kuvatakse varuliides (<p>Laadimine...</p>). Kui komponent on laetud, asendab see varuliidese.

Koodi tükeldamise eelised:

• Parem esialgne laadimisaeg: Laadides ainult esialgseks vaateks vajaliku koodi, saate vähendada aega, mis kulub teie rakenduse interaktiivseks muutumiseks.
• Vähendatud paketi suurus: Koodi tükeldamine aitab vähendada teie rakenduse JavaScripti paketi üldist suurust, mis võib parandada jõudlust, eriti madala ribalaiusega ühenduste puhul.
• Parem kasutajakogemus: Pakkudes kiiremat esialgset laadimist ja laadides koodi ainult vajadusel, saate luua sujuvama ja vastuvõtlikuma kasutajakogemuse.

Täiustatud koodi tükeldamise tehnikad:

• Marsruudipõhine koodi tükeldamine: Jagage oma rakendus marsruutide alusel, nii et iga marsruut laadib ainult vajaliku koodi. Seda saab hõlpsasti saavutada teekidega nagu React Router.
• Komponendipõhine koodi tükeldamine: Jagage üksikud komponendid eraldi osadeks, eriti suurte või harva kasutatavate komponentide puhul.
• Dünaamilised impordid: Kasutage oma komponentides dünaamilisi importimisi, et laadida koodi nõudmisel vastavalt kasutaja interaktsioonidele või muudele tingimustele.

3. Samaaegne režiim ja Suspense

Suspense on Reacti samaaegse režiimi võtmekomponent, mis on uute funktsioonide kogum, mis võimaldavad Reactil samaaegselt mitme ülesandega töötada. Samaaegne režiim võimaldab Reactil prioritiseerida olulisi uuendusi, katkestada pikalt kestvaid ülesandeid ja parandada teie rakenduse reageerimisvõimet.

Samaaegse režiimi ja Suspense'iga saab React:

• Alustada komponentide renderdamist enne kõigi andmete kättesaadavust: React saab alustada komponendi renderdamist isegi siis, kui mõned selle andmesõltuvused on veel hankimisel. See võimaldab Reactil kuvada osalise kasutajaliidese varem, parandades rakenduse tajutavat jõudlust.
• Renderdamise katkestamine ja jätkamine: Kui renderdamise ajal saabub kõrgema prioriteediga uuendus, saab React renderdamise protsessi katkestada, käsitleda kõrgema prioriteediga uuendust ja seejärel jätkata komponendi renderdamist hiljem.
• Vältida peamise lõime blokeerimist: Samaaegne režiim võimaldab Reactil teostada pikalt kestvaid ülesandeid peamist lõime blokeerimata, mis võib takistada kasutajaliidese reageerimisvõime kaotamist.

Samaaegse režiimi lubamiseks saate React 18-s kasutada createRoot API-t:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = createRoot(container); // Loo juur.
root.render(<App />);

Parimad tavad Suspense'i kasutamiseks

• Kasutage andmete hankimise teeki: Kaaluge andmete hankimise teegi, nagu SWR või TanStack Query, kasutamist, mis on loodud sujuvalt Suspense'iga töötama. Need teegid pakuvad funktsioone nagu vahemällu salvestamine, automaatsed uuesti proovimised ja veakäitlus, mis võivad teie andmete hankimise loogikat lihtsustada.
• Pakkuge sisukat varuliidest: Varuliides peaks selgelt näitama, et midagi laaditakse. Kasutage pöörlevaid indikaatoreid, edenemisribasid või skelettlaadimise komponente, et luua visuaalselt atraktiivne ja informatiivne laadimiskogemus.
• Käsitsege vigu graatsiliselt: Kasutage veapiire (Error Boundaries), et püüda kinni renderdamise ajal tekkivad vead. See aitab vältida kogu rakenduse kokkujooksmist ja pakub paremat kasutajakogemust.
• Optimeerige koodi tükeldamine: Kasutage koodi tükeldamist strateegiliselt, et vähendada rakenduse esialgset laadimisaega. Tuvastage suured või harva kasutatavad komponendid ja jagage need eraldi osadeks.
• Testige oma Suspense'i rakendust: Testige põhjalikult oma Suspense'i rakendust, et veenduda, et see töötab õigesti ja et teie rakendus käsitleb laadimisseisundeid ja vigu graatsiliselt.

Veakäitlus veapiiretega

Kuigi Suspense käsitleb *laadimise* olekut, käsitsevad veapiirid (Error Boundaries) *vea* olekut renderdamise ajal. Veapiirid on Reacti komponendid, mis püüavad kinni JavaScripti vead oma alamkomponendipuus, logivad need vead ja kuvavad varuliidese, selle asemel et kogu komponendipuud kokku jooksta.

Siin on veapiiri põhiline näide:

import React, { Component } from 'react';

class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    // Uuenda olekut, et järgmine renderdus näitaks varuliidest.
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {
    // Saate viga logida ka veateavitusteenusesse
    console.error(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      // Saate renderdada mis tahes kohandatud varuliidese
      return <h1>Midagi läks valesti.</h1>;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;

Veapiiri kasutamiseks mässige see komponendi ümber, mis võib vea visata:

import ErrorBoundary from './ErrorBoundary';
import MyComponent from './MyComponent';

function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}

export default App;

Kombineerides Suspense'i ja veapiire (Error Boundaries), saate luua tugeva ja vastupidava rakenduse, mis käsitleb nii laadimisseisundeid kui ka vigu graatsiliselt.

Pärismaailma näited

Siin on mõned pärismaailma näited, kuidas Suspense'i saab kasutada kasutajakogemuse parandamiseks:

• E-kaubanduse veebisait: Kasutage Suspense'i laadimise indikaatorite kuvamiseks toote detailide või piltide hankimise ajal. See võib takistada kasutajal nägemast tühja lehte andmete laadimise ootamise ajal.
• Sotsiaalmeedia platvorm: Kasutage Suspense'i kommentaaride või postituste laisaks laadimiseks, kui kasutaja lehel allapoole kerib. See võib parandada lehe esialgset laadimisaega ja vähendada allalaaditavate andmete hulka.
• Armatuurlaua rakendus: Kasutage Suspense'i laadimise indikaatorite kuvamiseks graafikute või diagrammide andmete hankimise ajal. See võib pakkuda sujuvamat ja vastuvõtlikumat kasutajakogemust.

Näide: Rahvusvaheline e-kaubanduse platvorm

Mõelge rahvusvahelisele e-kaubanduse platvormile, mis müüb tooteid globaalselt. Platvorm saab kasutada Suspense'i ja React.lazy()-d, et:

• Laadi toote pildid laisalt: Kasutage React.lazy(), et laadida toote pilte ainult siis, kui need on vaateväljas nähtavad. See võib oluliselt vähendada toodete loendi lehe esialgset laadimisaega. Mässige iga laisalt laetud pilt <Suspense fallback={<img src=\"placeholder.png\" alt=\"Laadimine...\" />}> sisse, et kuvada kohatäite pilt, kuni tegelik pilt laaditakse.
• Tükelda riigipõhised komponendid: Kui platvormil on riigipõhised komponendid (nt valuuta vormindamine, aadressi sisestusväljad), kasutage React.lazy(), et laadida need komponendid ainult siis, kui kasutaja valib konkreetse riigi.
• Hangi lokaliseeritud tootekirjeldused: Kasutage andmete hankimise teeki nagu SWR koos Suspense'iga, et hankida tootekirjeldused kasutaja eelistatud keeles. Kuvage laadimise indikaator lokaliseeritud kirjelduste hankimise ajal.

Järeldus

React Suspense on võimas funktsioon, mis suudab oluliselt parandada teie Reacti rakenduste kasutajakogemust. Pakkudes deklaratiivset viisi laadimisseisundite ja koodi tükeldamise haldamiseks, lihtsustab Suspense teie koodi ja muudab asünkroonsete toimingute kohta arutlemise lihtsamaks. Olenemata sellest, kas loote väikest isiklikku projekti või suurt ettevõtterakendust, aitab Suspense teil luua sujuvama, vastuvõtlikuma ja jõudlusvõimelisema kasutajakogemuse.

Integreerides Suspense'i andmete hankimise teekide ja koodi tükeldamise tehnikatega, saate avada Reacti samaaegse režiimi kogu potentsiaali ja luua tõeliselt kaasaegseid ja kaasahaaravaid veebirakendusi. Võtke Suspense omaks ja viige oma Reacti arendus järgmisele tasemele.

Lisalugemist

• React Suspense dokumentatsioon
• SWR dokumentatsioon
• TanStack Query dokumentatsioon
• React 18 teadaanne (samaaegne režiim)